/**
 * VideoDialog module
 */
/*
 *
 * 1.外部调入 ./components/Recognize/index  saveRecognizeProperty  上传数据
 * 2. ./components/Recognize/index 的this对象会继续传入下一级  暂时保留root
 * */
 var SingleUpload = require("../../../utils/upload/SingleUpload");
 var consts = require("../../../utils/consts");
 var Validator = require("../../../utils/validator/Validator");
 var CommonDialog = require("./CommonDialog");
 var React = require("react");
 var VideoDialog = React.createClass({
    mixins: [CommonDialog],
    getInitialProps: function (){
        return {
            data: {}
        }
    },
    getInitialState: function (){
        return {
            fileUploaded: false,
            is_local_v: 0,
            is_valid_video_src: false,
            error: ''
        }
    },
    updateUploaded: function (uploaded){
        this.setState({
            fileUploaded: uploaded
        });
    },
    componentWillMount: function (){
        this.form = {
            model: {
            }
        };
    },
    handleOnChangeVideoType: function (type, e){
        this.setState({
            is_local_v: type
        });
    },
    handleOnChangeVideoSrc: function (e){
        var node = $(e.target), src = node.val();
        var validator = Validator();

        validator.addRule(node, [{
            validator: "empty",
            error: $._('Video url required')
        }]);

        validator.addRule(node, [{
            validator: "video",
            error: $._('Video url error')
        }]);

        var errors = validator.execute();
        this.setState({
            is_valid_video_src: !errors,
            errors: errors
        });
        this.form.model = {
            html: src
        };
    },
    handleOnSubmit: function (){
        var is_local_v = this.state.is_local_v,
            data = {
                video: {}
            };

        // local
        if (is_local_v == "0"){
            var _data = this.refs.singleUpload.getBuildWidget();
            data.video.url = _data.url;
            data.video.video_thumbnail = _data.video_thumbnail;
            data.video.md5 = _data.md5;
            data.video.video_thumbnail_md5 = _data.video_thumbnail_md5;
        // online
        } else {
            data.video = {};
            data.video.html = this.form.model.html;
        }
        this.props.saveRecognizeProperty(data);
        this.handleOnCloseDialog();
    },
    render: function (){
        var is_local_v = this.state.is_local_v;
        var type = consts.WIDGET_TYPE.VIDEO;

        var uploadOpts = {
            maxFiles: 1,
            acceptedFiles: ".mp4"
        };

        var defaultSettings = {
            upload_url: window.is.CONST.upload_url,
            size: 50000000,
            accept: "video/mp4"
        };

        return (
            <div className="dialog-wrap">
                <div className="dialog-overlay"></div>
                <dialog ref="dialog" style={this.rStyle} className="btg-modal widget-form" onselectstart="return false">
                    <div className="btg-modal-content">
                        <div className="form-horizontal upload_video">
                            <div className="widget-form-title">
                                <label>{$._("Upload Video")}</label>
                            </div>
                            <div className="is_zip_u3d">
                                <div onClick={this.handleOnChangeVideoType.bind(this, 0)} datatype="0" className={"video_type_btn is_zip " + (is_local_v == 0 ? "activebtn" : "noactivebtn")}>
                                    <span>{$._("Local video")}</span>
                                </div>
                                <div onClick={this.handleOnChangeVideoType.bind(this, 1)} datatype="1" className={"video_type_btn is_u_3d " + (is_local_v == 0 ? "noactivebtn" : "activebtn")}>
                                    <span>{$._("Online video")}</span>
                                </div>
                            </div>
                            <div style={{display:(is_local_v == 0 ? "block" : "none")}}>
                                <SingleUpload ref="singleUpload" type={type} settings={defaultSettings}  parent={this} />
                            </div>
                            <div style={{display:(is_local_v == 1 ? "block" : "none")}}>
                                <div className="form-group error-tip">{this.state.errors}</div>
                                <div className="form-group web_upload_video">
                                    <div className="single-upload-group col-sm-8 input-group" data-form="form" data-md5="form.model.md5" data-html="form.model.html" data-single-upload data-accept="video/mp4" data-md5-field="video_md5" placeholder={$._("Please write online video address")}>
                                        <div className="default-status">
                                            <input onChange={this.handleOnChangeVideoSrc} ref="onlineVideoSrc" type="text" autoFocus className="form-control" placeholder={$._('Paste video playback page address')} />
                                        </div>
                                    </div>
                                </div>
                                <div className="alert alert-warning alert-dismissable alert-closeer">
                                    <span>{$._('Support video website,tecent,youku,tudou,aiqiyi')}</span>　
                                </div>
                            </div>
                            <div className="form-group buttons">
                                <button style={{display:(is_local_v == 0 ? "inline-block" : "none")}} onClick={this.handleOnSubmit} type="button" disabled={!this.state.fileUploaded}>
                                    {$._("Submit")}
                                </button>
                                <button style={{display:(is_local_v == 1 ? "inline-block" : "none")}} onClick={this.handleOnSubmit} type="button" disabled={!this.state.is_valid_video_src}>
                                    {$._("Submit")}
                                </button>
                            </div>
                        </div>
                    </div>
                    <a href="#" onClick={this.handleOnCloseDialog} className="modal-close icon-close"></a>
                </dialog>
            </div>
        )
    }
 });

 module.exports = VideoDialog;
